/**
 * 删除分类确认Modal组件
 */

import React, { useState } from 'react';
import { AlertTriangle } from 'lucide-react';
import type { DocumentCategory } from '@/types/document';

interface DeleteCategoryModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (targetCategoryId?: string) => Promise<void>;
  category: DocumentCategory | null;
  documentCount: number;
  availableCategories: DocumentCategory[];
}

const DeleteCategoryModal: React.FC<DeleteCategoryModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
  category,
  documentCount,
  availableCategories
}) => {
  const [targetCategoryId, setTargetCategoryId] = useState<string>('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  if (!isOpen || !category) return null;

  const hasDocuments = documentCount > 0;
  const isSystemCategory = category.is_system;

  const handleConfirm = async () => {
    setIsSubmitting(true);
    try {
      await onConfirm(targetCategoryId || undefined);
      onClose();
    } catch (error) {
      // 错误处理由父组件负责
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
        <div className="flex items-center mb-4">
          <div className="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
            <AlertTriangle className="w-5 h-5 text-red-600" />
          </div>
          <div className="ml-3">
            <h3 className="text-lg font-medium text-zinc-900">
              {isSystemCategory ? '无法删除系统分类' : '确认删除分类'}
            </h3>
          </div>
        </div>

        <div className="mb-6">
          {isSystemCategory ? (
            <div>
              <p className="text-zinc-600 mb-2">
                系统预设分类不能被删除。
              </p>
              <div className="bg-zinc-50 rounded-md p-3">
                <div className="flex items-center">
                  <span className="text-lg mr-2">{category.icon}</span>
                  <span className="font-medium">{category.name}</span>
                  <span className="ml-2 text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
                    系统分类
                  </span>
                </div>
              </div>
            </div>
          ) : (
            <div>
              <p className="text-zinc-600 mb-2">
                您确定要删除以下分类吗？
              </p>
              <div className="bg-zinc-50 rounded-md p-3 mb-4">
                <div className="flex items-center">
                  <span className="text-lg mr-2">{category.icon}</span>
                  <span className="font-medium">{category.name}</span>
                </div>
                {category.description && (
                  <p className="text-sm text-zinc-600 mt-1">{category.description}</p>
                )}
              </div>

              {hasDocuments && (
                <div className="mb-4">
                  <div className="bg-yellow-50 border border-yellow-200 rounded-md p-3 mb-3">
                    <p className="text-yellow-800 text-sm">
                      ⚠️ 此分类下有 <span className="font-medium">{documentCount}</span> 个文档
                    </p>
                  </div>
                  
                  <label className="block text-sm font-medium text-zinc-700 mb-2">
                    请选择文档迁移目标：
                  </label>
                  <select
                    value={targetCategoryId}
                    onChange={(e) => setTargetCategoryId(e.target.value)}
                    className="w-full px-3 py-2 border border-zinc-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="">未分类</option>
                    {availableCategories
                      .filter(cat => cat.id !== category.id) // 排除当前要删除的分类
                      .map((cat) => (
                        <option key={cat.id} value={cat.id}>
                          {cat.icon} {cat.name}
                        </option>
                      ))}
                  </select>
                  <p className="text-xs text-zinc-500 mt-1">
                    选择"未分类"将把文档移动到根目录
                  </p>
                </div>
              )}

              <p className="text-red-600 text-sm">
                注意：此操作不可撤销，删除后分类信息将无法恢复。
              </p>
            </div>
          )}
        </div>

        <div className="flex justify-end space-x-3">
          <button
            type="button"
            onClick={onClose}
            className="px-4 py-2 border border-zinc-300 text-zinc-700 rounded-md hover:bg-zinc-50 transition-colors"
            disabled={isSubmitting}
          >
            {isSystemCategory ? '关闭' : '取消'}
          </button>
          {!isSystemCategory && (
            <button
              type="button"
              onClick={handleConfirm}
              className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              disabled={isSubmitting}
            >
              {isSubmitting ? '删除中...' : '确认删除'}
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default DeleteCategoryModal;
